<template>
  <div>
<vxe-toolbar>
          <template #buttons>
            <vxe-button @click="importDataEvent">导入数据</vxe-button>
            <vxe-button @click="gettDataEvent">获取数据</vxe-button>
          </template>
        </vxe-toolbar>

        <vxe-table
          border
          ref="xTable"
          height="400"
          :row-config="{isHover: true}"
          :import-config="{}"
          :export-config="{}"
          :data="tableData">
          <vxe-column type="seq" width="60"></vxe-column>
          <vxe-column field="A" title="A"></vxe-column>
          <vxe-column field="B" title="B"></vxe-column>
          <vxe-column field="C" title="C" sortable></vxe-column>
          <vxe-column field="" title="操作" sortable>
            <template #default="{ row }">
              <vxe-button @click="getrowtDataEvent(row)">获取数据</vxe-button>
            </template>
          </vxe-column>
        </vxe-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: []
      }
    },
    methods: {
      getrowtDataEvent(row) {
        console.log(row)
      },
      gettDataEvent() {
        this.tableData = this.$refs.xTable.getTableData().tableData
        console.log(this.$refs.xTable.getTableData().tableData)
        console.log(this.tableData)
      },
      importDataEvent() {
        this.$refs.xTable.importData({ types: ['csv']})
      },
    }
  }
</script>

<style scoped>

</style>
